<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>加入文明实践团队 - 新时代文明实践智慧服务系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background: #f5f5f5;
            overflow-x: hidden;
            padding-top: 44px;
            padding-bottom: 60px;
        }
        
        /* 顶部导航栏 */
        .navbar {
            background: linear-gradient(to bottom, #fce4ec 0%, #fff3e0 100%);
            color: #ff6b00;
            height: 44px;
            padding: 0 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            box-shadow: 0 2px 8px rgba(255,107,0,0.2);
        }
        
        .navbar-left {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }
        
        .back-btn {
            font-size: 18px;
        }
        
        .navbar-title {
            font-size: 16px;
            font-weight: bold;
        }
        
        .navbar-right {
            font-size: 18px;
            cursor: pointer;
        }
        
        /* 搜索栏 */
        .search-bar {
            background: white;
            margin: 15px;
            border-radius: 20px;
            padding: 10px 15px;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .search-input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 14px;
            background: transparent;
        }
        
        .search-btn {
            color: #ff6b00;
            font-size: 16px;
            cursor: pointer;
        }
        
        /* 分类筛选 */
        .filter-tabs {
            background: white;
            margin: 0 15px 15px;
            border-radius: 16px;
            padding: 5px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            display: flex;
            gap: 5px;
            overflow-x: auto;
        }
        
        .filter-tab {
            flex-shrink: 0;
            text-align: center;
            padding: 8px 15px;
            border-radius: 12px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s;
            color: #666;
            white-space: nowrap;
        }
        
        .filter-tab.active {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
            font-weight: bold;
        }
        
        /* 推荐团队 */
        .featured-section {
            background: white;
            margin: 0 15px 15px;
            border-radius: 16px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }
        
        .featured-header {
            padding: 15px 20px;
            border-bottom: 1px solid #f0f2f5;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .featured-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }
        
        .featured-team {
            padding: 20px;
            background: linear-gradient(135deg, rgba(255,107,0,0.1), rgba(255,167,38,0.1));
            position: relative;
        }
        
        .team-badge {
            position: absolute;
            top: 15px;
            right: 15px;
            background: #ff6b00;
            color: white;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 10px;
            font-weight: bold;
        }
        
        .featured-content {
            display: flex;
            gap: 15px;
            align-items: flex-start;
        }
        
        .featured-avatar {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: white;
            flex-shrink: 0;
        }
        
        .featured-info {
            flex: 1;
        }
        
        .featured-team-name {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }
        
        .featured-team-desc {
            font-size: 12px;
            color: #666;
            margin-bottom: 8px;
            line-height: 1.4;
        }
        
        .featured-stats {
            display: flex;
            gap: 15px;
            font-size: 11px;
            color: #999;
            margin-bottom: 10px;
        }
        
        .join-btn {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
            border: none;
            padding: 6px 15px;
            border-radius: 12px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        /* 团队列表 */
        .team-list {
            margin: 0 15px;
        }
        
        .team-card {
            background: white;
            border-radius: 16px;
            margin-bottom: 15px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            transition: all 0.3s;
            cursor: pointer;
            overflow: hidden;
        }
        
        .team-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(255, 107, 0, 0.15);
        }
        
        .team-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 15px 20px 10px;
        }
        
        .team-info {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            flex: 1;
        }
        
        .team-avatar {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: white;
            flex-shrink: 0;
        }
        
        .team-details {
            flex: 1;
        }
        
        .team-name {
            font-size: 15px;
            font-weight: bold;
            color: #333;
            margin-bottom: 4px;
        }
        
        .team-type {
            background: linear-gradient(135deg, #fff3e0, #ffecb3);
            color: #ff6b00;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 10px;
            display: inline-block;
            margin-bottom: 6px;
        }
        
        .team-desc {
            font-size: 12px;
            color: #666;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .team-status {
            padding: 4px 8px;
            border-radius: 8px;
            font-size: 10px;
            font-weight: bold;
        }
        
        .status-recruiting {
            background: #d4edda;
            color: #155724;
        }
        
        .status-full {
            background: #fff3cd;
            color: #856404;
        }
        
        .team-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px 15px;
            background: #f8f9fa;
        }
        
        .team-stats {
            display: flex;
            gap: 15px;
            font-size: 11px;
            color: #666;
        }
        
        .team-stats span {
            display: flex;
            align-items: center;
            gap: 3px;
        }
        
        .team-action {
            display: flex;
            gap: 8px;
        }
        
        .btn {
            padding: 6px 12px;
            border-radius: 12px;
            border: none;
            font-size: 11px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
        }
        
        .btn-secondary {
            background: #fff3e0;
            color: #ff6b00;
        }
        
        .btn:hover {
            transform: translateY(-1px);
        }
        
        /* 加载更多 */
        .load-more {
            text-align: center;
            padding: 20px;
        }
        
        .load-more-btn {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
            border: none;
            padding: 10px 25px;
            border-radius: 20px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            display: flex;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }
        
        .nav-item {
            flex: 1;
            text-align: center;
            padding: 8px 0;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .nav-icon {
            font-size: 20px;
            margin-bottom: 2px;
        }
        
        .nav-label {
            font-size: 10px;
            color: #999;
        }
        
        .nav-item.active .nav-icon {
            color: #ff6b00;
        }
        
        .nav-item.active .nav-label {
            color: #ff6b00;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="navbar">
        <div class="navbar-left" onclick="goBack()">
            <span class="back-btn">←</span>
            <span class="navbar-title">加入文明实践团队</span>
        </div>
        <div class="navbar-right" onclick="showMyApplications()">
            📋
        </div>
    </div>
    
    <!-- 搜索栏 -->
    <div class="search-bar">
        <span class="search-icon">🔍</span>
        <input type="text" class="search-input" placeholder="搜索团队名称或服务类型">
        <span class="search-btn">搜索</span>
    </div>
    
    <!-- 分类筛选 -->
    <div class="filter-tabs">
        <div class="filter-tab active" onclick="switchFilter(this, 'all')">全部</div>
        <div class="filter-tab" onclick="switchFilter(this, 'volunteer')">志愿服务</div>
        <div class="filter-tab" onclick="switchFilter(this, 'cultural')">文艺团队</div>
        <div class="filter-tab" onclick="switchFilter(this, 'education')">教育培训</div>
        <div class="filter-tab" onclick="switchFilter(this, 'medical')">医疗健康</div>
        <div class="filter-tab" onclick="switchFilter(this, 'tech')">科技服务</div>
    </div>
    
    <!-- 推荐团队 -->
    <div class="featured-section">
        <div class="featured-header">
            <span>⭐</span>
            <div class="featured-title">推荐团队</div>
        </div>
        <div class="featured-team">
            <div class="team-badge">热门</div>
            <div class="featured-content">
                <div class="featured-avatar">🌱</div>
                <div class="featured-info">
                    <div class="featured-team-name">海城环保志愿者协会</div>
                    <div class="featured-team-desc">致力于环境保护宣传和绿色生活推广，组织各类环保实践活动</div>
                    <div class="featured-stats">
                        <span>👥 156人</span>
                        <span>📅 成立3年</span>
                        <span>⭐ 4.8分</span>
                    </div>
                    <button class="join-btn" onclick="joinTeam(1)">申请加入</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 团队列表 -->
    <div class="team-list">
        <div class="team-card" onclick="viewTeamDetail(1)">
            <div class="team-header">
                <div class="team-info">
                    <div class="team-avatar">🎭</div>
                    <div class="team-details">
                        <div class="team-name">海城文艺演出团</div>
                        <span class="team-type">文艺团队</span>
                        <div class="team-desc">专业文艺演出团队，擅长舞蹈、歌曲、戏曲等多种表演形式，为社区提供精彩的文化服务</div>
                    </div>
                </div>
                <span class="team-status status-recruiting">招募中</span>
            </div>
            <div class="team-footer">
                <div class="team-stats">
                    <span>👥 45人</span>
                    <span>📍 海城区</span>
                    <span>⭐ 4.6分</span>
                </div>
                <div class="team-action">
                    <button class="btn btn-secondary" onclick="event.stopPropagation(); contactTeam(1)">联系</button>
                    <button class="btn btn-primary" onclick="event.stopPropagation(); joinTeam(1)">加入</button>
                </div>
            </div>
        </div>
        
        <div class="team-card" onclick="viewTeamDetail(2)">
            <div class="team-header">
                <div class="team-info">
                    <div class="team-avatar">🏥</div>
                    <div class="team-details">
                        <div class="team-name">社区医疗服务队</div>
                        <span class="team-type">医疗健康</span>
                        <div class="team-desc">由专业医护人员组成，定期开展健康义诊、急救培训、健康知识宣传等活动</div>
                    </div>
                </div>
                <span class="team-status status-recruiting">招募中</span>
            </div>
            <div class="team-footer">
                <div class="team-stats">
                    <span>👥 28人</span>
                    <span>📍 海城区</span>
                    <span>⭐ 4.9分</span>
                </div>
                <div class="team-action">
                    <button class="btn btn-secondary" onclick="event.stopPropagation(); contactTeam(2)">联系</button>
                    <button class="btn btn-primary" onclick="event.stopPropagation(); joinTeam(2)">加入</button>
                </div>
            </div>
        </div>
        
        <div class="team-card" onclick="viewTeamDetail(3)">
            <div class="team-header">
                <div class="team-info">
                    <div class="team-avatar">📚</div>
                    <div class="team-details">
                        <div class="team-name">青少年教育志愿团</div>
                        <span class="team-type">教育培训</span>
                        <div class="team-desc">专注青少年教育辅导，提供课业辅导、兴趣培养、心理健康指导等服务</div>
                    </div>
                </div>
                <span class="team-status status-full">人员已满</span>
            </div>
            <div class="team-footer">
                <div class="team-stats">
                    <span>👥 50人</span>
                    <span>📍 海城区</span>
                    <span>⭐ 4.7分</span>
                </div>
                <div class="team-action">
                    <button class="btn btn-secondary" onclick="event.stopPropagation(); contactTeam(3)">联系</button>
                    <button class="btn btn-secondary" onclick="event.stopPropagation(); waitingList(3)">候补</button>
                </div>
            </div>
        </div>
        
        <div class="team-card" onclick="viewTeamDetail(4)">
            <div class="team-header">
                <div class="team-info">
                    <div class="team-avatar">👴</div>
                    <div class="team-details">
                        <div class="team-name">敬老助残服务队</div>
                        <span class="team-type">志愿服务</span>
                        <div class="team-desc">关爱老年人和残障人士，提供生活帮助、陪伴服务、康复指导等温暖服务</div>
                    </div>
                </div>
                <span class="team-status status-recruiting">招募中</span>
            </div>
            <div class="team-footer">
                <div class="team-stats">
                    <span>👥 32人</span>
                    <span>📍 海城区</span>
                    <span>⭐ 4.8分</span>
                </div>
                <div class="team-action">
                    <button class="btn btn-secondary" onclick="event.stopPropagation(); contactTeam(4)">联系</button>
                    <button class="btn btn-primary" onclick="event.stopPropagation(); joinTeam(4)">加入</button>
                </div>
            </div>
        </div>
        
        <div class="team-card" onclick="viewTeamDetail(5)">
            <div class="team-header">
                <div class="team-info">
                    <div class="team-avatar">💻</div>
                    <div class="team-details">
                        <div class="team-name">数字助老志愿队</div>
                        <span class="team-type">科技服务</span>
                        <div class="team-desc">帮助老年人学习使用智能手机、电脑等数字设备，消除数字鸿沟</div>
                    </div>
                </div>
                <span class="team-status status-recruiting">招募中</span>
            </div>
            <div class="team-footer">
                <div class="team-stats">
                    <span>👥 18人</span>
                    <span>📍 海城区</span>
                    <span>⭐ 4.5分</span>
                </div>
                <div class="team-action">
                    <button class="btn btn-secondary" onclick="event.stopPropagation(); contactTeam(5)">联系</button>
                    <button class="btn btn-primary" onclick="event.stopPropagation(); joinTeam(5)">加入</button>
                </div>
            </div>
        </div>
        
        <div class="team-card" onclick="viewTeamDetail(6)">
            <div class="team-header">
                <div class="team-info">
                    <div class="team-avatar">⚖️</div>
                    <div class="team-details">
                        <div class="team-name">法律援助志愿团</div>
                        <span class="team-type">志愿服务</span>
                        <div class="team-desc">由专业律师组成，为社区居民提供免费法律咨询和援助服务</div>
                    </div>
                </div>
                <span class="team-status status-recruiting">招募中</span>
            </div>
            <div class="team-footer">
                <div class="team-stats">
                    <span>👥 12人</span>
                    <span>📍 海城区</span>
                    <span>⭐ 4.9分</span>
                </div>
                <div class="team-action">
                    <button class="btn btn-secondary" onclick="event.stopPropagation(); contactTeam(6)">联系</button>
                    <button class="btn btn-primary" onclick="event.stopPropagation(); joinTeam(6)">加入</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 加载更多 -->
    <div class="load-more">
        <button class="load-more-btn" onclick="loadMore()">查看更多团队</button>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="nav-item" onclick="location.href='index.html'">
            <div class="nav-icon">🏠</div>
            <div class="nav-label">首页</div>
        </div>
        <div class="nav-item" onclick="location.href='venues.html'">
            <div class="nav-icon">📍</div>
            <div class="nav-label">阵地</div>
        </div>
        <div class="nav-item" onclick="location.href='activities.html'">
            <div class="nav-icon">📅</div>
            <div class="nav-label">活动</div>
        </div>
        <div class="nav-item" onclick="location.href='services.html'">
            <div class="nav-icon">🎁</div>
            <div class="nav-label">服务</div>
        </div>
        <div class="nav-item" onclick="location.href='profile.html'">
            <div class="nav-icon">👤</div>
            <div class="nav-label">我的</div>
        </div>
    </div>
    
    <script>
        // 返回上一页
        function goBack() {
            history.back();
        }
        
        // 切换筛选
        function switchFilter(element, type) {
            document.querySelectorAll('.filter-tab').forEach(tab => {
                tab.classList.remove('active');
            });
            element.classList.add('active');
            
            console.log('筛选团队类型:', type);
            filterTeams(type);
        }
        
        // 筛选团队
        function filterTeams(type) {
            const cards = document.querySelectorAll('.team-card');
            cards.forEach(card => {
                if (type === 'all') {
                    card.style.display = 'block';
                } else {
                    // 这里可以根据团队类型进行筛选
                    card.style.display = 'block';
                }
            });
        }
        
        // 查看团队详情
        function viewTeamDetail(id) {
            alert(`查看团队详情 ID: ${id}\n\n功能开发中...\n将显示：\n• 团队详细介绍\n• 成员信息\n• 服务案例\n• 加入要求\n• 联系方式`);
        }
        
        // 申请加入团队
        function joinTeam(id) {
            const teamNames = {
                1: '海城环保志愿者协会',
                2: '社区医疗服务队',
                3: '青少年教育志愿团',
                4: '敬老助残服务队',
                5: '数字助老志愿队',
                6: '法律援助志愿团'
            };
            
            alert(`申请加入团队：${teamNames[id]}\n\n申请流程：\n1. 填写申请表\n2. 团队负责人审核\n3. 面试或试用期\n4. 正式加入\n\n功能开发中...`);
        }
        
        // 联系团队
        function contactTeam(id) {
            alert(`联系团队\n\n联系方式：\n• 电话：138-0000-0000\n• 微信：team_contact\n• 邮箱：team@example.com\n\n建议先通过平台申请加入，负责人会主动联系您。`);
        }
        
        // 候补列表
        function waitingList(id) {
            alert('加入候补列表\n\n该团队目前人员已满，您可以：\n1. 加入候补列表\n2. 有名额时优先通知\n3. 关注团队动态\n\n是否确认加入候补？');
        }
        
        // 显示我的申请
        function showMyApplications() {
            alert('我的申请记录\n\n• 海城环保志愿者协会 - 审核中\n• 敬老助残服务队 - 已通过\n• 青少年教育志愿团 - 候补中\n\n功能开发中...');
        }
        
        // 搜索功能
        document.querySelector('.search-btn').addEventListener('click', function() {
            const keyword = document.querySelector('.search-input').value;
            if (keyword.trim()) {
                alert(`搜索团队关键词: ${keyword}\n功能开发中...`);
            }
        });
        
        // 回车搜索
        document.querySelector('.search-input').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                document.querySelector('.search-btn').click();
            }
        });
        
        // 加载更多
        function loadMore() {
            alert('加载更多团队\n\n将显示更多优秀团队信息\n功能开发中...');
        }
        
        // 页面加载动画
        document.addEventListener('DOMContentLoaded', function() {
            const cards = document.querySelectorAll('.team-card');
            cards.forEach((card, index) => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(20px)';
                setTimeout(() => {
                    card.style.transition = 'all 0.5s ease';
                    card.style.opacity = '1';
                    card.style.transform = 'translateY(0)';
                }, index * 100);
            });
        });
    </script>
</body>
</html>